<script setup lang="ts">
import { ref } from 'vue'
import { useStore } from 'vuex'
import { useRouter, useRoute } from 'vue-router'
import TabRightMenu from './TabRightMenu.vue'

interface Tab {
  name: string
  path: string
  label: string
  icon?: string
}

const store = useStore()
const router = useRouter()
const route = useRoute()
const menuRef = ref<InstanceType<typeof TabRightMenu>>()

// 删除未使用的props定义
// const tabsList = computed(() => store.state.tabsList)

const handleClose = (tag: Tab) => {
  if (tag.name === 'home') return
  store.commit('closeTab', tag)
  
  if (tag.name === route.name) {
    const remainingTabs = store.state.tabsList
    const targetTab = remainingTabs[remainingTabs.length - 1] || { name: 'home' }
    router.push({ name: targetTab.name })
  }
}

// 删除未使用的clearAllTabs函数

const handleCommand = (command: string, tag: Tab) => {
  switch(command) {
    case 'refresh':
      window.location.reload()
      break
    case 'close':
      handleClose(tag)
      break
    case 'close-others':
      store.commit('closeOtherTabs', tag)
      break
  }
}

defineExpose({
  showContextMenu: (event: MouseEvent, tag: Tab) => {
    menuRef.value?.showContextMenu(event, tag)
  }
})
</script>

<template>
  <div class="common-tabs">
    <TabRightMenu 
      ref="menuRef"
      @command="handleCommand"
    />
  </div>
</template>

<!-- 保持样式不变 -->

<style scoped lang="less">
.common-tabs {
  --tab-primary-color: #409EFF;
  --tab-danger-color: #F56C6C;
  --tab-danger-light-20: #f88;
  --tab-danger-light-35: #faa;

  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px 16px;
  background: #fff;
  border-bottom: 1px solid #e4e7ed;

  .tab-item {
    cursor: pointer;
    transition: all 0.3s ease;
    user-select: none;

    /* 激活状态样式 */
    &[effect="dark"] {
      color: #fff;
      background: var(--tab-primary-color);
      border-color: var(--tab-primary-color);
    }

    /* 悬停效果 */
    &:hover:not([effect="dark"]) {
      transform: translateY(-2px);
      box-shadow: 0 2px 12px rgba(0,0,0,0.1);
    }
  }

  /* 清除按钮样式 */
  .clear-all {
    color: var(--tab-danger-color);
    border-color: var(--tab-danger-light-20);
    background: var(--tab-danger-light-35);
    
    &:hover {
      background: var(--tab-danger-light-20);
    }
  }
}
</style>